<template>
  <view class="content">
    <view class="warp-top">
      <view class="line">
        <view class="price">店铺日流水数据</view>
        <view class="explain">
          <picker mode="date" :value="yesterday" :end="endTime" @change="getCheckDate">
            <view class="date">{{yesterday}} <image src="../../static/image/icon/arrow_down.png" class="r-icon" mode=""></image> 日报</view>
          </picker>
        </view>
      </view>
    </view>
    <view class="warp-top-fixed">
      <view class="line">
        <view class="price">
          {{monthBillData.directStoreNumber || 0}}
        </view>
        <view class="explain">
          直邀店铺<image src="../../static/image/icon/ic-question.png" class="why-icon" style="vertical-align: middle;" @click="openModal(0)">
        </view>
      </view>
      <view class="borde"></view>
      <view class="line">
        <view class="price">
          {{monthBillData.indirectStoreNumber || 0}}
        </view>
        <view class="explain">
          关联店铺<image src="../../static/image/icon/ic-question.png" class="why-icon" style="vertical-align: middle;" @click="openModal(1)"></image>
        </view>
      </view>
    </view>
    <view class="warp-box">
      <view class="line tit especially">
        <view class="left">流水(元)</view>
        <view class="left">收益(元)</view>
      </view>
      <view class="line">
        <view class="w1">店铺累计<image src="../../static/image/icon/ic-question.png" class="why-icon" @click="openModal(2)"></image></view>
        <view class="w2">{{monthBillData.totalTurnover | current}}</view>
        <view class="w2">{{monthBillData.totalEarnings | current}}</view>
      </view>
      <view class="line">
        <view class="w1">直邀店铺<image src="../../static/image/icon/ic-question.png" class="why-icon" @click="openModal(3)"></image></view>
        <view class="w2">{{monthBillData.directTurnover | current}}</view>
        <view class="w2">{{monthBillData.directEarnings | current}}</view>
      </view>
      <view class="line">
        <view class="w1">关联店铺<image src="../../static/image/icon/ic-question.png" class="why-icon" @click="openModal(4)"></image></view>
        <view class="w2">{{monthBillData.indirectTurnover | current}}</view>
        <view class="w2">{{monthBillData.indirectEarnings | current}}</view>
      </view>
      <!-- <view class="line">
        <view class="w1">本人店铺<image src="../../static/image/icon/ic-question.png" class="why-icon" @click="openModal(5)"></image></view>
        <view class="w2">{{monthBillData.myTurnover | current}}</view>
        <view class="w2">{{monthBillData.myEarnings | current}}</view>
      </view> -->
    </view>
    <view class="warp-box" style="margin-top: 20rpx;">
      <view class="line tit">
        <view class="left">直邀店铺数据</view>
      </view>
      <view class="line-tab">
        <view>推荐店铺<image src="../../static/image/icon/ic-question.png" class="why-icon" @click="openModal(6)"></image></view>
        <view style="margin-left: 68rpx;margin-right: 24rpx;">累计日流水(元)<image src="../../static/image/icon/ic-question.png" class="why-icon" @click="openModal(7)"></image></view>
        <view>流水收益(元)<image src="../../static/image/icon/ic-question.png" class="why-icon" @click="openModal(8)"></image></view>
      </view>
    </view>
    <view class="collapse">
      <view class="collapse-body" v-for="(item, index) in teamList" :key="index">
        <view class="user">
          <image class="img" :src="item.photoUrl"></image><text class="text2Ellipsis">{{item.storeName}}</text>
        </view>
        <view class="total">{{item.turnover | current}}</view>
        <view class="price">{{item.earnings | current}}</view>
      </view>
    </view>
    <view class="more" v-if="teamList && teamList.length < pages.total" @click="getMoreList">
      查看更多团队信息 <image src="../../static/image/icon/arrow-down-1.png" class="icon"></image>
    </view>
    <view class="more" v-else>
      已经到底啦
    </view>
    <view class="new-pop-style" v-if="isExpalin">
      <view class="new-pop-box">
        <view class="pop-tit">{{drawModalData.title}}</view>
        <view class="pop-conter">
          {{drawModalData.content}}
        </view>
        <view class="pop-foot">
          <view class="btn cur" @click="isExpalin = false">我知道了</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { findStaticByDay, findstoreDetail } from "@/service/billingDetail/billingDetail.service.js"
  export default {
    data() {
      return {
        isShow: false,
        isExpalin: false,
        monthBillData: '',
        yesterday: '',
        endTime: '',
        pages: {
          size: 10,
          current: 1,
          total: 0
        },
        teamList: '',
        modalData: [
          {title: '直接推荐店铺', content: '我直接推荐的店铺数量。'},
          {title: '关联推荐店铺', content: '推荐体系内，跟我有直接利益关系的店铺数量。'},
          {title: '店铺累计', content: '店铺累计=直邀店铺和关联店铺通过社区电商收款码所收到的消费流水与产生的流水收益。'},
          {title: '直邀店铺', content: '直接推荐的店铺通过社区电商收款码所收到的消费流水与产生的流水收益。'},
          {title: '关联店铺', content: '间接推荐的店铺通过社区电商收款码所收到的消费流水与产生的流水收益。'},
          {title: '本人店铺', content: '本人的店铺通过社区电商店铺所收到的消费收款流水与产生的流水收益。'},
          {title: '推荐店铺', content: '此处所拉取的店铺列表，仅包含了直接推荐入驻店铺，不包括非直接推荐关系的店铺。'},
          {title: '累计流水', content: '此处所统计的总流水，包含了通过第三方（微信、支付宝）的流水，也包含了社区电商平台的平台货币（余额、现金券）的流水。'},
          {title: '流水收益', content: '线下收款流水的奖励结算，仅结算第三方（微信、支付宝)及账户余额部分的流水，现金券抵扣部分不计入结算范围。'},
        ],
        drawModalData: {}
      };
    },
    onShow() {
      var time = (new Date).getTime()-24*60*60*1000;
      this.yesterday = this.transferDate(new Date(time));
      this.endTime = this.yesterday;
      this.findMonthBill()
      this.findTeamContriList()
    },
    methods: {
      getCheckDate (e) {
        this.yesterday = e.detail.value;
        this.findMonthBill();
        this.findTeamContriList();
      },
      // 日期计算
      transferDate(date) {
        // 年  
        var year = date.getFullYear();  
        // 月  
        var month = date.getMonth() + 1;  
        // 日  
        var day = date.getDate();  
        if (month >= 1 && month <= 9) {  
          month = "0" + month;  
        }  
        if (day >= 0 && day <= 9) {  
          day = "0" + day;  
        }  
        var dateString = year + '-' + month + '-' + day;  
        return dateString;
      },
      openModal(index) {
        this.drawModalData = this.modalData[index];
        this.isExpalin = true;
      },
      openCollapse () {
        this.isShow = !this.isShow;
      },
      findMonthBill () {
        findStaticByDay({day: this.yesterday}, (res) => {
          if (res.status === 0) {
            this.monthBillData = res.data
          }
        })
      },
      findTeamContriList () {
        var params = {
          size: this.pages.size,
          current: this.pages.current,
          day: this.yesterday
        }
        findstoreDetail(params, res => {
          if (this.pages.current === 1) {
            this.teamList = res.data.records
          } else {
            this.teamList = this.teamList.concat(res.data.records)
          }
          this.pages.total = res.data.total
        })
      },
      getMoreList () {
        if (this.pages.total > this.teamList.length) {
          this.pages.current++
          this.findTeamContriList()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.content {
  font-family: PingFang-SC-Medium,PingFang-SC;
}
.warp-top {
  width: 690rpx;
  height: 260rpx;
  background: rgba(43,43,43,1);
  padding: 44rpx 20rpx 0 40rpx;
  display: flex;
  justify-content: space-around;
  .line {
    text-align: center;
    .price {
      font-size: 48rpx;
      font-weight: 600;
      color: rgba(247,230,186,1);
    }
    .explain {
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(255,255,255,1);
      font-family: PingFang-SC-Medium,PingFang-SC;
      margin-top: 20rpx;
    }
  }
}
.r-icon {
  width: 44rpx;
  height: 44rpx;
  margin-right: 8rpx;
  vertical-align: middle;
}
.warp-top-fixed {
  width: 690rpx;
  height: 116rpx;
  background: rgba(255,255,255,1);
  border-radius: 12rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333333;
  text-align: center;
  margin: -60rpx auto 0;
  .price {
    font-size: 28rpx;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    color: rgba(51,51,51,1);
  }
  .explain {
    font-size: 24rpx;
    font-family: PingFang-SC-Medium,PingFang-SC;
    // font-weight: 500;
    color: rgba(51,51,51,1);
    margin-top: 16rpx;
  }
  .borde {
    height: 20rpx;
    border: 2rpx solid rgba(51,51,51,1);
    margin-left: 40rpx;
    margin-right: 40rpx;
  }
}
.warp-box {
  background: #FFFFFF;
  border-radius: 16px 16px 0px 0px;
  padding-left: 24rpx;
  margin-top: 18rpx;
  .line {
    padding: 36rpx 28rpx 32rpx 0;
    display: flex;
    justify-content: space-between;
    font-family: PingFang-SC-Medium,PingFang-SC;
    color: #333333;
    font-weight: 500;
    font-size: 28rpx;
    .w1 {
      width: 38%;
    }
    .w2 {
      width: 29%;
    }
    .right {
      .r-icon {
        vertical-align: baseline;
      }
    }
    &.tit {
      border-bottom: 1px solid rgba(238,238,238,1);
      font-size: 32rpx;
      .right {
        font-family: PingFangSC-Semibold,PingFang SC;
        font-weight: 600;
        color: rgba(194,172,120,1);
        .text1 {
          font-weight: 500;
          color: #333333;
          margin-left: 10rpx;
        }
      }
    }
    &.especially {
      font-size: 30rpx;
      justify-content: flex-end;
      .left {
        margin-right: 100rpx;
      }
    }
  }
  .line-tab {
    display: flex;
    justify-content: flex-end;
    padding: 40rpx 16rpx 40rpx 0;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium,PingFang-SC;
    font-weight: 500;
    color: rgba(51,51,51,1);
  }
}
.collapse {
  font-family: PingFang-SC-Medium,PingFang-SC;
  color: #333333;
  font-weight: 500;
  font-size: 28rpx;
  .collapse-body {
    margin-top: 8rpx;
    padding: 28rpx 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FFFFFF;
    .user {
      width: 276rpx;
      display: flex;
      align-items: center;
      // line-height: 56rpx;
      .img {
        width: 56rpx;
        height: 56rpx;
        margin-right: 20rpx;
        border-radius: 50%;
        background-color: pink;
        flex-shrink: 0;
      }
    }
    .total, .price {
      min-width: 192rpx;
    }
    .price {
      .icon {
        width: 20rpx;
        height: 10rpx;
        margin-left: 42rpx;
        transform: rotate(0deg);
        transition-property: transform;
        transition-duration: 0.3s;
        transition-timing-function: ease;
        &.action {
          transform: rotate(180deg);
        }
      }
    }
  }
  .collapse-son {
    height: 0;
    overflow: hidden;
    .wrapper {
      padding: 24rpx;
      background-color: #FFFFFF;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      transition-property: transform;
      transition-duration: 0.3s;
      transition-timing-function: ease;
      .tit {
        font-size: 28rpx;
        font-weight: 500;
        color: rgba(51,51,51,1);
      }
      .line-tit {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 32rpx;
        .line {
          width: 40rpx;
          height: 4rpx;
          opacity: 0.9;
          background-color: #999999;
        }
        .text2 {
          padding: 0 20rpx;
        }
      }
      .text-box {
        font-size: 24rpx;
        display: flex;
        justify-content: space-around;
        margin-top: 34rpx;
      }
    }
    &.openModal {
      height: auto;
      flex-direction: column;
      .wrapper {
        transform: translateY(0);
        -webkit-transform: translateY(0);
      }
    }
  }
}
.more {
  text-align: center;
  padding: 28rpx 0 32rpx;
  background-color: #FFFFFF;
  margin: 20rpx 0 12rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: rgba(194,172,120,1);
  .icon {
    width: 16rpx;
    height: 18rpx;
    margin-left: 12rpx;
  }
}
.new-pop-style {
  .new-pop-box {
    height: 306rpx !important;
    .pop-tit {
      margin-top: 24rpx;
      font-size: 26rpx;
    }
    .pop-conter {
      font-size: 20rpx;
      color: #333333;
    }
    .pop-foot {
      justify-content: center;
      .cur {
        font-size: 23rpx;
        border: none !important;
      }
    }
  }
}
.why-icon {
  width: 24rpx;
  height: 24rpx;
  margin-left: 12rpx;
}
</style>
